<script setup>
import { ref } from 'vue'
// 初始数据
let initBlogs = [
    {
        id:1,
        title:'特别的人',
        author:'方大同',
        content:'我们是对方特别的人'
    },
    {
        id:2,
        title:'才二十三',
        author:'方大同',
        content:'才二十三'
    },
    {
        id:3,
        title:'爱爱爱',
        author:'方大同',
        content:'我爱故我在'
    },
    {
        id:4,
        title:'微微一笑很倾城',
        author:'汪苏泷',
        content:'我们在忙忙碌碌寻宝藏'
    },
    {
        id:5,
        title:'江南',
        author:'林俊杰',
        content:'圈圈圆圆圈圈，年年天天年年'
    },
]
// 实际应用数据
let blogs = ref(initBlogs)
// 显示新增/编辑框
let isShow = ref(false)
// 查找关键字
let keyword = ref('')
// 用于新增和编辑，获取数据
let blog = ref({
    id:0,
    title:'',
    author:'',
    content:''
})
// 设置要修改的数据，获取id值
let editId = ref(0)

// 方法
function btnAdd(){
    // console.log('新增');
    isShow.value = true
    // 重置 blog 和 editId
    blog.value = { id: 0, title: '', author: '', content: '' };
    editId.value = 0;
}
function btnSearch(){
    console.log('过滤');
    console.log(keyword.value);
    
    // 从数组中筛选出符合条件的数据
    let findResult = initBlogs.filter(item => item.title.includes(keyword.value) || item.author.includes(keyword.value))
    blogs.value = findResult
}
function btnEdit(id){
    console.log(id);
    isShow.value = true
    // 将当前要编辑的博客的id值传递出去
    editId.value = id
    // 找到当前编辑的博客，并将其数据赋值给 blog    
    let editBlog = blogs.value.find(item => item.id === id)
    blog.value = { ...editBlog };
    
}
function btnDel(id){
    console.log(id);
    let idx = blogs.value.findIndex(item => item.id === id)
    // 删除对应数据
    blogs.value.splice(idx,1)
}
function btnSave(){
    // console.log('保存');
    isShow.value = false
    // 拿到要修改的id值
    console.log('当前获取的id值为' + editId.value);
    if(editId.value){    // 编辑操作
        // 获取要修改的博客的下标
        let idx = blogs.value.findIndex(item => item.id === editId.value)
        // console.log(blogs.value[idx]);
        console.log(blog.value);
        
        // 修改博客
        if(idx !== -1){
            blogs.value[idx] = { ...blog.value }
        }
        

    }else{    //新增
        // console.log('新增');
        // 获取当前列表的最后一个的id值
        let lastId = blogs.value[blogs.value.length-1].id
        blog.value.id = lastId + 1   
        // // 将数据推送到数组中
        blogs.value.push(blog.value)  
    }
}
function btnCancel(){
    console.log('取消');
    isShow.value = false
}
</script>

<template>
    <div class="addOrEdit" v-show="isShow">
        <form>
            <table>
                <tbody>
                    <tr>
                        <td><label for="">标题：</label></td>
                        <td>
                            <input type="text" placeholder="请输入标题" v-model="blog.title">
                        </td>
                    </tr>
                    <tr>
                        <td><label for="">作者：</label></td>
                        <td>
                            <input type="text" placeholder="请输入作者" v-model="blog.author">
                        </td>
                    </tr>
                    <tr>
                        <td><label for="">内容：</label></td>
                        <td>
                            <input type="text" placeholder="请输入内容" v-model="blog.content">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="保存" @click="btnSave()">
                        </td>
                        <td>
                            <input type="button" value="取消" @click="btnCancel">
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
    <div class="operation">
        <input type="text" placeholder="请输入关键字" v-model="keyword">
        <input type="button" value="查找" @click="btnSearch()">
        <input type="button" value="新增" @click="btnAdd()">
    </div>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>标题</th>
                <th>作者</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="blog in blogs" :key="blog.id">
                <td>{{ blog.id }}</td>
                <td>{{ blog.title }}</td>
                <td>{{ blog.author }}</td>
                <td>{{ blog.content }}</td>
                <td>
                    <input type="button" value="编辑" @click="btnEdit(blog.id)">
                    <input type="button" value="删除" @click="btnDel(blog.id)">
                </td>
            </tr>
        </tbody>
    </table>
</template>